import type { VNode } from "vue";
import type { ElTableColumn, TableColumnCtx, ElTable } from "element-plus";
import type { ExtractProps } from "../types";

type TableColumnProps = InstanceType<typeof ElTableColumn>["$props"];
type DefaultSlot<R extends Record<string, any>> = (prop: {
  row: R;
  column: TableColumnCtx<R>;
  $index: number;
}) => VNode | VNode[];
type HeaderSlot<R extends Record<string, any>> = (prop: {
  column: TableColumnCtx<R>;
  $index: number;
}) => VNode | VNode[];
type filterIconSlot = (prop: { filterOpened: boolean }) => VNode;
type expandSlot = (prop: { expanded: boolean }) => VNode;

type Size = "small" | "default" | "large";

/** 表格过滤配置 */
export interface FilterConfig<P = any> {
  /** 占位符 */
  placeholder?: string;
  /** Input 尺寸 */
  size?: Size;
  /** 过滤方法 或 过滤字段 */
  filterBy: ((prop: string, data: P[]) => P[]) | (keyof P & string);
}

/** 表格列属性 */
export interface TableColumn<R extends Record<string, any> = any>
  extends TableColumnProps {
  prop?: keyof R & string;
  /** 自定义列内容 */
  Default?: DefaultSlot<R>;
  /** 自定义表头 */
  header?: HeaderSlot<R>;
  /** 自定义列过滤图标 */
  filterIcon?: filterIconSlot;
  /** 自定义列展开内容 */
  expand?: expandSlot;
}

/** 表格属性 */
export interface TableProps<T = any> extends ExtractProps<typeof ElTable> {
  rowKey?: ((row: T) => string) | string;
}
